{extend name="base" /}
{block name="css"}
{css href="__AD_CSS__/index.css,__AD_CSS__/normalize.css" /}
{/block}
{block name="body"}
<div id="content">
    <header>
        <h1>
            <div class="screen">
                <i class="layui-icon layui-icon-play" id='btn'></i>
                <i class="layui-icon layui-icon-pause" style="display: none;" id='quite'></i>
            </div>
            {$config.title|default=$Think.lang.Title}大数据统计
            <div id="showtime"></div>
        </h1>
    </header>
    <section>
        <div class="main">
            <div class="column">
                <div class="panel">
                    <div class="panel-footer">
                    </div>
                    <div class="bar">
                        <h2>柱形图-就业行业</h2>
                        <div class="chart" id="a">
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <div class="panel-footer">
                    </div>
                    <div class="line">
                        <h2>折线图-人员变化
                            <a href="javascript:;">2020</a>
                            <a href="javascript:;">2021</a>
                        </h2>
                        <div class="chart">
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <div class="panel-footer">
                    </div>
                    <div class="pie">
                        <h2>柱形图-就业行业</h2>
                        <div class="chart">
                        </div>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="num">
                    <div class="num-hd">
                        <ul>
                            <li>154555</li>
                            <li>25443</li>
                        </ul>
                    </div>
                    <div class="num-bd">
                        <ul>
                            <li>前端</li>
                            <li>市场</li>
                        </ul>
                    </div>
                </div>
                <div class="map">
                    <div class="map1"></div>
                    <div class="map2"></div>
                    <div class="map3"></div>
                    <div class="chart"></div>
                </div>
            </div>
            <div class="column">
                <div class="panel">
                    <div class="panel-footer">
                    </div>
                    <div class="bar2">
                        <h2>柱形图-就业行业</h2>
                        <div class="chart">
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <div class="panel-footer">
                    </div>
                    <div class="line2">
                        <h2>柱形图-就业行业</h2>
                        <div class="chart">
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <div class="panel-footer">
                    </div>
                    <div class="pie2">
                        <h2>柱形图-就业行业</h2>
                        <div class="chart">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
{/block}
{block name="js"}
{js href="__AD_JS__/echarts.min.js,__AD_JS__/flexible.js,__AD_JS__/china.js,__AD_JS__/myMap.js,__AD_JS__/datascreen.js" /}
<script type="text/javascript">
    var clock = null;
    clock = setTimeout(nowTime, 1000);
    var content = document.getElementById('content');
    $("#btn").click(function(){  
        //全屏处理前，将隐藏dom秀出来
        fullScreen(content);
        $("#btn").hide();
        $("#quite").show();
    });

    var quite = document.getElementById('quite'); 
    $("#quite").click(function(){  
        exitFullScreen();
        //隐藏dom
        $("#btn").show();
        $("#quite").hide();
    }); 
    function nowTime() {
        clearTimeout(clock);
        var t = new Date();
        var time = t.getFullYear() + "年" + (t.getMonth()+1) +
            "月" + t.getDate() + "日" + t.getHours() + "时" + t.getMinutes() +
            "分" + t.getSeconds() + "秒";
        document.getElementById('showtime').innerHTML = time;
        clock = setTimeout(nowTime, 1000);
    }
    //进入全屏
    function fullScreen(el) {  
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,  
            wscript;  
        if(typeof rfs != "undefined" && rfs) {  ////////
            rfs.call(el);  
            return;  
        } 
        if(typeof window.ActiveXObject != "undefined") {  
            wscript = new ActiveXObject("WScript.Shell");  
            if(wscript) {  
                wscript.SendKeys("{F11}");  
            }  
        }  
    }
    //退出全屏
    function exitFullScreen() {  
        var el= document,  
            cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,  
            wscript;  
        if (typeof cfs != "undefined" && cfs) {  
          cfs.call(el);  
          return;  
        }
        if (typeof window.ActiveXObject != "undefined") {  
            wscript = new ActiveXObject("WScript.Shell");  
            if (wscript != null) {  
                wscript.SendKeys("{F11}");  
            }  
        }  
    }   
 </script>
{/block}